<template>
  <div v-loading="loading">
    <a-form-model layout="inline" ref="referralForm">
      <a-row
        :gutter="10"
        type="flex"
        style="margin-bottom: 20px"
        align="middle"
        v-for="(item, index) in referralInfo"
        :key="index"
      >
        <a-col :span="20">
          <div class="border-box">
            <a-form-model-item label="推荐人ID">
              <a-input
                type="number"
                disabled
                style="width:100px"
                v-model="item.referral_id"
              />
              <a-button type="primary" style="margin-left: 5px" @click="onClickBtn(index)">选择</a-button>
            </a-form-model-item>
            <a-form-model-item label="返利比例(%)">
              <a-input-number :min="0" :max="100" :step="0.1" precision="2" v-model="item.referral_rebate" />
            </a-form-model-item>
          </div>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" shape="circle" @click="onCLickAdd"><a-icon type="plus" /></a-button>
          <template v-if="referralInfo.length > 1">
            <a-divider type="vertical" />
            <a-button type="danger" shape="circle" @click="onClickRemove(index)"><a-icon type="minus" /></a-button>
          </template>
        </a-col>
      </a-row>
      <a-form-model-item>
        <a-button :loading="btnLoading" type="primary" @click="submitForm">
          保存
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <a-modal
      title="选择用户"
      style="width:300px"
      v-model="visible"
      :destroyOnClose="true"
      :footer="null"
    >
      <div style="margin-bottom: 10px">
        <a-input-search placeholder="输入昵称搜索" v-model="keyword" allowClear enter-button @search="onSearch" />
      </div>
      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
      >
        <span slot="baseinfo" slot-scope="text, record">
          <img style="width:40px;heigth:40px;border-radius: 3px;margin-right: 5px" :src="record.avatar" />
          <span :length="20" tooltip>{{ record.name }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" @click="onSelect(record)">
            选择
          </a-button>
        </span>
      </s-table>
    </a-modal>
  </div>
</template>

<script>
import { getReferralParams, setReferralParams } from '@/api/store'
import { getSelectUserList } from '@/api/user'
import { STable } from '@/components'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '用户信息',
    scopedSlots: { customRender: 'baseinfo' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'SaasSettingReferral',
  components: {
    STable
  },
  data () {
    return {
      loading: false,
      btnLoading: false,
      referralInfo: [{
        referral_id: 0,
        referral_rebate: 0.00
      }],
      columns,
      currentIndex: 0,
      visible: false,
      keyword: '',
      loadData: parameter => {
        return getSelectUserList({
          ...parameter,
          storeId: this.storeId,
          type: 'user',
          keyword: this.keyword
        }).then(res => {
          return res.data
        })
      }
    }
  },
  created () {
    this.getData()
  },
  props: {
    storeId: {
      type: Number,
      default: 0
    }
  },
  methods: {
    getData: function () {
      this.loading = true
      getReferralParams({ storeId: this.storeId }).then(res => {
        if (res.code == 0) {
          if (res.data.length == 0) {
            this.referralInfo = [{
              referral_id: 0,
              referral_rebate: 0.00
            }]
          } else {
            this.referralInfo = res.data
          }
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.loading = false
      })
    },
    onCLickAdd: function () {
      this.referralInfo.push({
        referral_id: 0,
        referral_rebate: 0.00
      })
    },
    onClickRemove: function (index) {
      this.referralInfo.splice(index, 1)
    },
    onClickBtn: function (index) {
      this.currentIndex = index
      this.visible = true
    },
    onSearch: function () {
      this.$refs.table.refresh(true)
    },
    onSelect: function (item) {
      this.referralInfo[this.currentIndex].referral_id = item.id
      this.visible = false
    },
    submitForm: function () {
      const ids = []
      for (let i = 0; i < this.referralInfo.length; i++) {
        if (!this.referralInfo[i].referral_id || !this.referralInfo[i].referral_rebate) {
          this.$message.warning('推荐人ID或返利比例不能为空！')
          return
        }
        if (ids.indexOf(this.referralInfo[i].referral_id) !== -1) {
          this.$message.warning('推荐人ID不能重复！')
          return
        }
        ids.push(this.referralInfo[i].referral_id)
      }
      this.btnLoading = true
      setReferralParams({
        lists: this.referralInfo,
        storeId: this.storeId
      }).then(res => {
        if (res.code == 0) {
          this.$message.success('保存成功！')
        } else {
          this.$message.warning(res.msg ? res.msg : '保存失败！')
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.btnLoading = false
      })
    }
  }
}
</script>

<style scoped>
.border-box {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
}
</style>
